<template>
	<view>
		<view class="container">
			<view class="form-box">
				<view class="form-item">
					<u--input placeholder="请输入用户名" v-model="username" border="bottom" clearable focus></u--input>
				</view>

				<view class="form-item">
					<u--input placeholder="请输入密码" type="password" v-model="password" border="bottom" clearable></u--input>
				</view>

				<view class="form-item">
					<u--input placeholder="请确认密码" type="password" v-model="repeatPassword" border="bottom" clearable></u--input>
				</view>

				<view class="form-item">
					<u--input placeholder="请输入手机号" v-model="phone"  border="bottom" clearable></u--input>
				</view>

				<view class="form-item-code">
					<view class="form-item code-item">
						<u--input placeholder="请输入验证码" v-model="codeNum"  border="bottom" clearable></u--input>
					</view>
					<view class="code-btn" @click="btnCode">{{code}}</view>
				</view>

				<button type="primary" class="register-btn" @click="register">{{registerText}}</button>

			</view>
		</view>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
	export default {
		data() {
			return {
				code: '获取验证码',
				username:'',
				password:'',
				repeatPassword:'',
				phone:'',
				codeNum:'',
				addreg:'',//是否是添加账号
				registerText:'注册'
			};
		},
		onLoad(option){
			uni.$setNavigationBarColor()
			if(option.add){
				this.add = option.add
				wx.setNavigationBarTitle({
				  title: this.add 
				})
				this.registerText = this.add 
			}
			
		},
		computed:{
			...mapState("login",["accountNumber"])
		},
		methods: {
			...mapMutations('login',["addAccountNumber"]),
			//验证码
			btnCode() {
				let sum = []
				let num = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
				for (let i = 0; i < 6; i++) {
					let v = parseInt(Math.random() * 10)
					sum.push(v)
				}
				this.code = sum.join("")	
			},
			//注册
			register(){
				let repeat = void 0
				if(this.accountNumber.length > 0){
					 repeat = this.accountNumber.some(item => item.username == this.username)
				}
				
				let reg = /^1[3-9]\d{9}$/
				if(this.username == ''){
				 return	uni.$showToast('请输入用户名','error')
				}else if(this.password == ''){
					return	uni.$showToast('请输入密码','error')
				}else if(this.repeatPassword == ''){
					return	uni.$showToast('请输入密码','error')
				}else if(this.phone == ''){
					return	uni.$showToast('请输入手机号','error')
				}else if(this.codeNum == ''){
					return	uni.$showToast('请输入验证码','error')
				}else if(!reg.test(this.phone)){
						return	uni.$showToast('手机号不正确','error')
				}else if(this.password !== this.repeatPassword){
						return	uni.$showToast('密码不相同','error')
				}else if(this.password.length < 6){
						return	uni.$showToast('密码至少6位数','error')
				}else if(this.codeNum !== this.code){
						return	uni.$showToast('验证码错误','error')
				}else if(repeat){
					return	uni.$showToast('用户名已存在','error')
				}else {
					this.addAccountNumber({username:this.username,password:this.password,phone:this.phone})
						uni.$showToast('注册成功')
					uni.navigateTo({
						url:'/subUserInfo/loginRegistration/loginRegistration'
					})
				}
			}
		},
	}
</script>

<style lang="scss">
	.container {
		padding: 200rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;

		.register-btn {
			background-color: #c80000;
		}

		.form-item {
			margin: 40rpx 0;
		}

		.form-item-code {
			display: flex;
			justify-content: center;
			align-items: center;

			.code-btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100px;
				height: 30px;
				padding: 20rpx 40rpx;
				border: 1px solid #d9d9d9;
				border-radius: 10rpx;
				color: #fff;
				background: #3c9cff;

				&:active {
					background-color: #1a73e8;
				}
			}
		}
	}
</style>